<!DOCTYPE html>
<html>

  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="applicable-device" content="pc">
    <title>重庆写字楼出租_重庆商务中心出租-重庆快址官网</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="shortcut icon" href="http://images.diandianzu.com/Public/Home/v5/images/favicon.ico">
    <link rel="stylesheet" type="text/css" href="css/common.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <style>
          figure{
            width:100%;
            height:100vh;
            background-color:rgba(0,0,0,1);
            display: block;
            margin:0px auto;
            overflow: hidden;
            perspective: 1200px;
            -webkit-perspective:1200px;
            -o-perspective:1200px;
            -moz-perspective:1200px;
          } 
          figure div{
                 width:auto;
                 display:inline;
                 margin-top:100px;
                 white-space: nowrap;
                 z-index: 2;
                 float:left;
                 transition-duration: 0ms;
                 -webkit-transition-duration:0ms;
                 -o-transition-duration:0ms;
                 -moz-transition-duration:0ms;
                 transform-style: preserve-3d;
                 transform-style: preserve-3d;
                 transition-property:transform;
                 transition:transform 1s;
                 touch-action:pan-x;
                 

          }
           figure a:nth-of-type(1){
            margin-left:20%;
           }
          figure a{
            display: inline-block;
            width:60%;
            margin-right:1%;

            box-sizing: border-box;
          }
           figure a img{
            width:100%;
            object-fit:cover; 
          }
          button:focus{
            outline:0;
          }
          .arow{
            background-color:rgba(0,0,0,.5);
            width:20%;
            height:100vh;
            z-index:3;
            position:absolute;
            font-size:40px;
            border:none;
            display: inline-block;
            appearance:none;
            text-align: left;

          }
          .arow span{
            display: block;
            width:5px;
            background-color: rgba(255,255,255,.7);
            height:20vh;
            position:absolute;
          }
          .next span:nth-of-type(1){
            transform:rotate(-45deg);
            left:150px;
            top:300px;
          }
          .next span:nth-of-type(2){
             transform:rotate(45deg);
             left:150px;
          }
          .pre span:nth-of-type(1){
            top:300px;
            transform:rotate(45deg);
            right:150px;
          }
          .pre span:nth-of-type(2){
             transform:rotate(-45deg);
             right:150px;
          }
          .pre{
            left:0px;
            top:0px;
          }
          .next{
            right:0px;
            top:0px;
          }
    </style>
   
  </head>
  <body>
      <figure>
         <button class="pre arow">
          <span></span>
          <span></span>
         </button>
        <div id="wrapper">
        <a><img src="img/write.jpg"/></a>
        <a><img src="img/write.jpg"/></a>
        <a><img src="img/write.jpg"/></a>
        <a><img src="img/write.jpg"/></a>
        <a><img src="img/write.jpg"/></a>
        <a><img src="img/write.jpg"/></a>
        <a><img src="img/write.jpg"/></a>
        <a><img src="img/write.jpg"/></a>
        <a><img src="img/write.jpg"/></a>
        <a><img src="img/write.jpg"/></a>
        <a><img src="img/write.jpg"/></a>
        <a><img src="img/write.jpg"/></a>
        <a><img src="img/write.jpg"/></a>
        <a><img src="img/write.jpg"/></a>
        <a><img src="img/write.jpg"/></a>
        <a><img src="img/write.jpg"/></a>
        </div>
        <button class="next arow">
          <span></span>
          <span></span>
        </button>
      </figure>
      <script type="text/javascript" src="js/common.js"></script>
       <script type="text/javascript">
           var wrappera=document.getElementById("wrapper");
           var wrappera=document.getElementById("wrapper").getElementsByTagName("a");
           var figure=document.getElementsByTagName("figure")[0];
           figure.style.height=window.innerHeight;
           var pre=document.getElementsByClassName("pre")[0];
           var next=document.getElementsByClassName("next")[0];
            var wi=-0;
            var scollspan=window.innerWidth*0.6+window.innerWidth*0.01*2-6.5;
            var prespan=window.innerWidth*0.2;
            var screew=window.innerWidth;
            var sumwi=wrappera[0].offsetWidth*wrappera.length;
            console.log(sumwi);
           EventUtil.addHandler(pre,"click",function(){
                wi+=scollspan;
                if(wi<prespan){
                     wrapper.style.transform="translate3D("+wi+"px,0,0)";
                     next.setAttribute("enabled","ture");
                     next.removeAttribute("disabled");
                     next.style.color="rgba(255,0,0,.7)";
                     
            }else{
                     pre.setAttribute("disabled","disabled");
                     pre.style.color="rgba(0,0,0,.2)";
                      wi-=scollspan;

            }
            });
          
          EventUtil.addHandler(next,"click",function(){
            wi-=scollspan;
            if(wi>-sumwi){
                     wrapper.style.transform="translate3D("+wi+"px,0,0)";
                     pre.setAttribute("enabled","ture");
                     pre.removeAttribute("disabled");
                     pre.style.color="rgba(255,0,0,.7)";
                     
            }else{
                     next.setAttribute("disabled","disabled");
                     next.style.color="rgba(0,0,0,.2)";
                      wi+=scollspan;
                    
            }
            
            
            });
    </script>
  </body>

</html>